<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
    <link rel="stylesheet" href="../css/category-3.css"/>
    <!--以下引入了swiper的css文件-->
    <link rel="stylesheet" href="../css/swiper-3.3.1.min.css"/>
    <script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
    <!--以下引入了swiper的jquert插件-->
    <script src="../js/swiper-3.3.1.min.js"></script>
</head>
<body>
    <header id="header">
        <div id="topHeader">
            <div id="nav">
                <div class="logo">
                    <a href="##">
                        <img src="../img/logo_0413.png" alt="logo"/>
                    </a>
                </div>
            </div>
            <div id="searchBox">
                <div class="search-form-container">
                    <form action="##">
                        <div class="input-container">
                            <input type="text" placeholder="360手机助手"/>
                        </div>
                        <input type="submit" value id="submit"/>
                    </form>
                </div>
            </div>
        </div>
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="##">
                            <img src="../img/111.jpg" alt="logo"/>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="##">
                            <img src="../img/222.jpg" alt="logo"/>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="##">
                            <img src="../img/333.jpg" alt="logo"/>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="##">
                            <img src="../img/444.jpg" alt="logo"/>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="##">
                            <img src="../img/555.jpg" alt="logo"/>
                        </a>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!--  &lt;!&ndash; 如果需要导航按钮 &ndash;&gt;
                  <div class="swiper-button-prev"></div>
                  <div class="swiper-button-next"></div>-->

                <!-- 如果需要滚动条 -->
                <!--<div class="swiper-scrollbar"></div>-->
            </div>
        </div>
        <div class="nav-bar">
            <ul>
                <li><a href="index.html">精选</a></li>
                <li ><a href="rank-2.html">排行</a></li>
                <li style="background: #2f8f03;"><a href="#">分类</a></li>
                <li><a href="mustHave-4.html">必备</a></li>
            </ul>
        </div>
    </header>

    <div class="main">
        <ul class="main-nav-top">
            <li><a href="##">软件</a></li>
            <li><a href="##">游戏</a></li>
        </ul>
        <div class="lists">
            <ul>
                <li>
                    <a href="##" class="clearFix content">
                        <div class="classify-img">
                            <img src="../img/t01f77e15cfb917a802.jpg" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>新酷应用集中营</span>
                                <span>37款</span>
                            </h2>
                            <p>科技媒体爱范儿专业推荐，新鲜应用抢先玩</p>
                        </div>
                    </a>
                </li>
                <li style="border-top: 1px solid #d4d5d6">
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t011a477224a1bca7c0.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>系统安全</span>
                                <span>67404款</span>
                            </h2>
                            <p>360手机卫士 搜狗输入法 应用锁</p>
                        </div>
                        <div class="classify-right">
                            <i></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t010d4514b183116fed.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>通讯社交</span>
                                <span>60724款</span>
                            </h2>
                            <p>手机QQ 飞信 新浪微博 Skype</p>
                        </div>
                        <div class="classify-right">
                            <i></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t01cfc3262e0384fa09.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>影音视听</span>
                                <span>79003款</span>
                            </h2>
                            <p>天天动听 手机电视 快图浏览</p>
                        </div>
                        <div class="classify-right">
                            <i></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t015af3ca48d90f0704.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>新闻阅读</span>
                                <span>81603款</span>
                            </h2>
                            <p>IReader 起点读书 有道词典</p>
                        </div>
                        <div class="classify-right">
                            <i></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t011e1f10a889dec29f.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>便捷生活</span>
                                <span>204038款</span>
                            </h2>
                            <p>谷歌地图 墨迹天气 大众点评</p>
                        </div>
                        <div class="classify-right">
                            <i></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t0111b439dafbf39403.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>办公商务</span>
                                <span>60724款</span>
                            </h2>
                            <p>手机QQ 飞信 新浪微博 Skype</p>
                        </div>
                        <div class="classify-right">
                            <i></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t018aa6335f070f6a49.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>主题壁纸</span>
                                <span>64363款</span>
                            </h2>
                            <p>手机QQ 飞信 新浪微博 Skype</p>
                        </div>
                        <div class="classify-right">
                            <i></i>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t016d166272d40915bd.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span></span>
                                <span>60724款</span>
                            </h2>
                            <p>手机QQ 飞信 新浪微博 Skype</p>
                        </div>
                        <div class="classify-right">
                            <i></i>
                        </div>
                    </a>
                </li>

            </ul>
        </div>
        <div class="lists">
            <ul id="change-ul">
                <li>
                    <a href="##" class="clearFix content">
                        <div class="classify-img">
                            <img src="../img/t0158e5d77506eb82bd.jpg" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>宅男"你懂得"</span>
                                <span>2款</span>
                            </h2>
                            <p>"脱裤子" 玩的游戏！</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t0178b33d7cd718cca3.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>休闲益智</span>
                                <span>148838款</span>
                            </h2>
                            <p>愤怒的小鸟 水果忍者 ...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t016f917623683cccdf.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>卡牌</span>
                                <span>954款</span>
                            </h2>
                            <p>王者之剑 时空猎人 ...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t0198466d823d7b3403.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>解密冒险</span>
                                <span>52117款</span>
                            </h2>
                            <p>侠盗猎车手 怪盗鲁邦 ...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t01ab4270ee75f2cd03.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>竞速</span>
                                <span>148838款</span>
                            </h2>
                            <p>尖峰滑雪 实况足球 ...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t01f83465bdcc3ea0a4.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>射击</span>
                                <span>148838款</span>
                            </h2>
                            <p>致命空袭 现代战争 ...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t01bfb5b413684eb55d.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>模拟经营</span>
                                <span>11466款</span>
                            </h2>
                            <p>美女指挥员 现代塔防 ...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t01c4b412d6a1a3c74c.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>棋牌天地</span>
                                <span>16346款</span>
                            </h2>
                            <p>斗地主 中国象棋 ...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t016b70c12059104a54.png" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>角色扮演</span>
                                <span>148838款</span>
                            </h2>
                            <p>犬夜叉 发条骑士 ...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="../img/t01e453e58c5fd40545.jpg" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>消除</span>
                                <span>642款</span>
                            </h2>
                            <p>一起车车车 旋风跑跑 ...</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>养成</span>
                                <span>127款</span>
                            </h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>塔防</span>
                                <span>207款</span>
                            </h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>体育</span>
                                <span>642款</span>
                            </h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>格斗</span>
                                <span>642款</span>
                            </h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>跑酷</span>
                                <span>642款</span>
                            </h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="##" class="clearFix content" >
                        <div class="classify-img">
                            <img src="" alt=""/>
                        </div>
                        <div class="classify-cont">
                            <h2 class="clearFix">
                                <span>动作</span>
                                <span>642款</span>
                            </h2>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <footer>
        <div class="footer">
            <a href="#topHeader">
                返回顶部
            </a>
        </div>
    </footer>
</body>
<style type="text/css">
    .swiper-container{
        width: 100%;
        height: 10rem;
        margin: 0 auto;
    }
    .swiper-slide img{
        width: 100%;
        display: block;
        position: absolute;
        height: 100%;
    }
</style>
<script type="text/javascript" src="../js/nav-img.js"></script>
<script type="text/javascript" src="../js/nav-scroll.js"></script>
<script>
$(function(){
    var btn=$(".main .main-nav-top li");
    var box=$(".main .lists");
    //alert(box.length);
    //console.log(btn);
    btn.on('click',function(){
        //alert($(this).index());
        var index=$(this).index();
        box.css({"display":"none"});
        box.eq(index).css({"display":"block"});
        btn.css({"background":"#ededed"});
        $(this).css({"background":"white"})
    });
})

</script>
</html>